import React, { PropTypes } from 'react';
import { browserHistory } from 'react-router';

import UserInfo from '../components/userInfo.jsx';

const propTypes = {
  id: PropTypes.number,
  text: PropTypes.string,
};

const defaultProps = {
  text: 'Hello World',
  className:'',
};

class Menu extends React.Component {
  constructor(props) {
    super(props);
    console.log(props)
    this.state ={
      className:props.show,
      isClicked:false,
    }
    // return false;
  }
  static methodsAreOk() {
    return true;
  }
  componentWillMount() {
    console.log('componentWillMount');
    return false;
  }
  componentDidMount() {
    console.log('componentDidMount');
    return false;
  }
  componentWillReceiveProps(props) {
    console.log('componentWillReceiveProps---menu');
    console.log(props)
    console.log(this.state)
    if (!this.state.isClicked) {
      this.state.className=props.show;
    }
    this.state.isClicked=false;
    // return false;
  }
  shouldComponentUpdate() {
    return true;
  }
  componentWillUpdate() {
    console.log('componentWillUpdate');
    return false;
  }
  componentDidUpdate() {
    console.log('componentDidUpdate');
    // return false;
  }
  componentWillUnmount() {
    console.log('componentWillUnmount');
    // return false;
  }
  clickHandlers(event) {
    // console.log('clicked');
    // console.log(event.target.id)
    let url='/';

    switch(event.target.id) {
      case 'all':
      case 'good':
      case 'share':
      case 'ask':
      case 'job':
        url+='list/'+event.target.id;
        break;
      case 'message':
      case 'about':
        url+=event.target.id;
        break;
    }
    this.setState({
      className:'',
      isClicked:true,
    })
    browserHistory.push(url)
    // return false;
  }
  render() {
    console.log(this.props)
    return (
    	<section id="sideBar" className={"nav-list "+(this.state.className)}>
        <UserInfo></UserInfo>
        <ul className="list-ul">
            <li className="icon-quanbu iconfont" v-link="{'name':'list',query:{tab:'all'}}" id="all" onClick={this.clickHandlers.bind(this)}>全部</li>
            <li className="icon-hao iconfont" v-link="{name:'list',query:{tab:'good'}}" id="good" onClick={this.clickHandlers.bind(this)}>精华</li>
            <li className="icon-fenxiang iconfont" v-link="{name:'list',query:{tab:'share'}}" id="share" onClick={this.clickHandlers.bind(this)}>分享</li>
            <li className="icon-wenda iconfont" v-link="{name:'list',query:{tab:'ask'}}" id="ask" onClick={this.clickHandlers.bind(this)}>问答</li>
            <li className="icon-zhaopin iconfont" v-link="{name:'list',query:{tab:'job'}}" id="job" onClick={this.clickHandlers.bind(this)}>招聘</li>
            <li className="icon-xiaoxi iconfont line" v-link="{name:'message'}" id="message" onClick={this.clickHandlers.bind(this)}>消息</li>
            <li className="icon-about iconfont" v-link="{name:'about'}" id="about" onClick={this.clickHandlers.bind(this)}>关于</li>
        </ul>
    </section>);
  }
}

Menu.propTypes = propTypes;
Menu.defaultProps = defaultProps;

export default Menu;